import React, { Component } from "react";
import "./App.css";
import { Layout, LocaleProvider, Menu } from "antd";
import Contents from "./views/ContentS";
import { HashRouter, Link, Router } from "react-router-dom";
import StylesProvider from "@material-ui/styles/StylesProvider";
import { jssPreset } from "@material-ui/styles";
import { create } from "jss";
import createHashHistory from "history/createHashHistory";
import zh_CN from "antd/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";

moment.locale("zh-cn");

const jss = create(jssPreset());
class App extends Component {
  render() {
    return (
      <div className="App">
        <LocaleProvider locale={zh_CN}>
          <StylesProvider jss={jss}>
            <HashRouter>
              <Router history={createHashHistory()}>
                <Layout>
                  <Layout.Header style={{ height: "5vh" }}>
                    后台管理系统
                  </Layout.Header>
                  <Layout>
                    <Layout.Sider>
                      <Menu
                        theme="dark"
                        mode="inline"
                      >
                        <Menu.Item key="1">
                          <Link to={"/add-person"}>
                            <span>添加人员信息</span>
                          </Link>
                        </Menu.Item>
                        <Menu.Item key="2">
                          <Link to={"/view-person"}>
                            <span>查看人员信息</span>
                          </Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                          <span>系统信息</span>
                        </Menu.Item>
                      </Menu>
                    </Layout.Sider>
                    <Layout.Content>
                      <Contents />
                    </Layout.Content>
                  </Layout>
                </Layout>
              </Router>
            </HashRouter>
          </StylesProvider>
        </LocaleProvider>
      </div>
    );
  }
}

export default App;
